<template>
  <section>
      <van-row class="footer-panel">
        <div :class="['item',key==index&&'on']" v-for="(item,index) in menu" :key="index" @click="handleMenu(item)">
            <img  :src="key==index?item.iconOn:item.icon" />
            <p class="name">{{item.name}}</p>
        </div>
      </van-row>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        key:0,
        menu:[
          {
            icon:require('../assets/images/icon/home.png'),
            iconOn:require('../assets/images/icon/home_on.png'),
            name:'首页',
            path:'/'
          },
          {
            icon:require('../assets/images/icon/user.png'),
            iconOn:require('../assets/images/icon/user_on.png'),
            name:'我的',
            path:'/mine'
          }
        ]
      };
    },
		props: ["keys"],
    mounted() {
       this.key=this.keys;
		},
		methods:{
			//切换菜单
			handleMenu(item){
        this.$router.push(item.path);
			}
		}
}
</script>
<style scoped lang='less'>

</style>



